<template>
  <view class="card padding-30 margin-top-14">
    <l-title title="用车信息" />
    <view class="journey-card margin-tb-30">
      <view class="flex-row align-center justify-between">
        <text class="text-30 color-t1 text-bold">{{ dateConversion(orderType? orderInfo.startTime : orderInfo.startDate) }}</text>
        <text class="text-24 color-t3" v-if="orderType">{{ getDay() }}天</text>
		<text class="text-24 color-t3" v-else>{{ days }}天</text>
        <text class="text-30 color-t1 text-bold">{{ dateConversion(orderType? orderInfo.endTime : orderInfo.endDate) }}</text>
      </view>

      <view class="margin-top-14 flex-row align-center justify-between">
        <view v-if="orderInfo.itinerary && orderInfo.productName.indexOf('特价巴士') == -1" class="route">
          <text class="text-28 color-t1 ">{{ orderInfo.itinerary }}</text>
        </view>
        <template v-else>
          <view class="flex-column flex-center flex-item route">
            <text class="text-24 color-t1 text-center">{{ orderInfo.from }}</text>
          </view>
          <view class="center flex-row align-center justify-between">
            <view class="center-item flex-row flex-center">
              <text class="text-20 color-white text-bold">始</text>
            </view>
            <view class="line flex-item" />
            <view class="center-item flex-row flex-center">
              <text class="text-20 color-white text-bold">终</text>
            </view>
          </view>
          <view class="flex-column flex-center flex-item route">
            <text class="text-24 color-t1 text-center">{{ orderInfo.to }}</text>
          </view>
        </template>
      </view>

      <view v-if="stopShow">
        <tui-divider color="#333" :size="28" :height="64" padding="14rpx 0">停靠点</tui-divider>
        <text class="text-28 color-t3">{{ stopShow }}</text>
      </view>
    </view>

    <order-info-item label="客户名称" :value="orderInfo.ioType ? (orderInfo.username || '暂无') : `${name}客运平台`" />
    <order-info-item v-show="orderInfo.customerPhone && orderInfo.customerPhone !== 'undefined'" label="客户手机号" :value="orderInfo.customerPhone" />
    <order-info-item v-show="orderInfo.ioType" label="套团" :value="orderInfo.type==6 ? '是' : '否'" />

    <order-info-item v-show="orderInfo.transferStationType && (orderInfo.transferStationType == 1 || orderInfo.transferStationType == 3)" :label="orderInfo.transferStationType == 3 ? '车次号' : '航班号'" :value="orderInfo.shiftNumber||'暂无'" />
    <order-info-item label="联系人/导游" :value="orderInfo.contact || '暂无' " />
    <order-info-item v-show="orderInfo.ioType" label="联系电话" :value="callPhone + (orderInfo.ioType ? '' : '(虚拟号)') || '暂无'" />
    <order-info-item label="乘车人数" :value="orderInfo.passengers || orderInfo.seatNum || '暂无' " />

    <template v-show="!orderInfo.ioType">
      <!-- <order-info-item v-if="orderInfo.transferStationType" :label="languageConfig.order.product" :value="orderInfo.transferStationLabel || '无'" /> -->
      <order-info-item :label="languageConfig.order.product" :value="orderInfo.productName" />
    </template>

    <order-info-item v-show="orderInfo.internalProductTypeLabel && orderInfo.ioType" :label="languageConfig.order.product" :value="orderInfo.internalProductTypeLabel + (orderInfo.internalProductType === 3 ? '(' + orderInfo.pickUpNum + '趟)' : '')" />
    <order-info-item v-show="orderInfo.type == 3 && orderInfo.receiveSendType && orderInfo.receiveSendType == 2" label="接送方式" :value="orderInfo.receiveSendType == 2 ? '火车' : '飞机'" />
    <order-info-item v-show="orderInfo.itineraryUrl" label="行程单" has-slot>
      <image class="itinerary" :src="orderInfo.itineraryUrl" @click="viewImage" />
    </order-info-item>
  </view>
</template>

<script>
import OrderInfoItem from '../order-info-item/order-info-item'
import { viewImage, dateFormat } from '@/common/util'
import { name } from '@/common/config'
import { languageConfig } from '@/common/language.js'
export default {
  name: 'ClientInfo',
  components: {
    OrderInfoItem
  },
  props: {
	  orderType: {
	    type: Number,
	    default: 0
	  },
    orderInfo: {
      type: Object,
      default: () => {}
    },
    stopShow: {
      type: String,
      default: ''
    },
    callPhone: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name,
	  languageConfig
    }
  },
  watch:{
	  orderInfo:{
		  handler(newVal){
			  console.log(newVal,'newval')
		  },
		  immediate:true,
		  deep:true
	  }
  },
  computed: {
    dateFormat() {
      return (date) => {
        if (date) {
          const arr = date.slice(5).split(' ')
          arr[0] = dateFormat(arr[0], 'MM月DD日')
          return arr.join(' ')
        }
        return ''
      }
    },
    days() {
      if (this.orderInfo.startDate && this.orderInfo.startDate) {
        const startDate = Date.parse(this.orderInfo.startDate.substring(0, this.orderInfo.startDate.indexOf(' ')))
        const endDate = Date.parse(this.orderInfo.endDate.substring(0, this.orderInfo.endDate.indexOf(' ')))
        const days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000) + 1
        return days
      }
      return ''
    }
  },
  methods: {
	  getDay(){
		  if(this.orderInfo.startTime || this.orderInfo.endTime){
			  const startDate = Date.parse(this.orderInfo.startTime.substring(0, this.orderInfo.startTime.indexOf(' ')))
			  const endDate = Date.parse(this.orderInfo.endTime.substring(0, this.orderInfo.endTime.indexOf(' ')))
			  const days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000) + 1
			  return days
		  }
	  },
	dateConversion(date){
		if(Object.prototype.toString.call(date) === '[object String]' && JSON.stringify(date).includes("-")){
			try{
				let dateArr = date.slice(5).split(' ')
				dateArr[0] = dateArr[0].replace(/-/g,'月') + '日'
				dateArr = dateArr.join(' ')
				return dateArr
			}catch(e){
				return date
			}
		}
		return date;
	},
    viewImage() {
      viewImage(0, [this.orderInfo.itineraryUrl])
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(top,14);

.journey-card{
  padding:28rpx 24rpx;
  background:$color-background;
  border-radius:20rpx;
}
.center{
  width:118rpx;
  height:34rpx;
  margin:0 24rpx;
}
.center-item{
  width:34rpx;
  height:34rpx;
  border-radius:50%;
}
.center-item:first-child{
  background:$color-primary;
}
.center-item:last-child{
  background:#FD7033;
}
.line{
  border-top:2rpx solid $color-border;
}
.itinerary{
  width: 140rpx;
  height: 140rpx;
  border-radius: $radius-default;
}
.total-mileage{
  width:168rpx;
}
.total-mileage-value{
  width:140rpx;
  height:40rpx;
  border-radius:20rpx;
  background:$color-background;
  border:2rpx solid $color-border;
  z-index:5;
}
.total-mileage-line{
  border-top:2rpx solid $color-border;
  @include position(absolute,50%,0,$left:0);
  z-index:2
}
/*.route{
  height:64rpx;
}*/
</style>
